<template>
  <div class="sale_form">
    <p class="watchStatus">
      {{logInfo}}
    </p>
    <div class="bg_texture"></div>
    <main @mousemove="watchMouse">
      <div :class="['main-inner',virtualKeyboard?'virtual_keyboard':'',isiOS?'is_iOS':'',isAndroid?'is_Android':'',isInput1?'is_input1':'',isInput2?'is_input2':'',input1Activated?'input1_activated':'']">
        <div :class="['model',formVerifyError?'form_verify_error':'',positionReset?'position_reset':'']">
          <div class="face">
            <div class="eye-shade"></div>
            <div :class="['eye-white',eyeClose?'eye_close':'']">
              <div class="eye-ball" :style="{transform:'translate('+eyePositionX+'em,'+eyePositionY+'em)'}"></div>
            </div>
            <div class="eye-shade right"></div>
            <div :class="['eye-white right',eyeClose?'eye_close':'']">
              <div class="eye-ball" :style="{transform:'translate('+eyePositionX+'em,'+eyePositionY+'em)'}"></div>
            </div>
          </div>
        </div>
        <form @submit.prevent="validateBeforeSubmit" :class="['form',virtualKeyboard?'mobile':'']">
          <div class="inputGrop">
            <label :class="[label1State ? 'active' : '']">手机号</label>
            <input :class="{'input': true, 'is_error': errors.has('phone') }" name="phone" v-validate="'required|digits:11'" type="text" @input="watchString($event)" @focus="input1Focus" @blur="input1Blur">
            <button type="button" :disabled="countDowningButton" @click="getVerificationCode" :class="[!buttonOriginStatus?'origin_status':'']">{{getVerificationCodeInfo}}</button>
          </div>
          <div class="inputGrop">
            <label :class="[label2State ? 'active' : '']">验证码</label>
            <input :class="{'input': true, 'is_error': errors.has('password') }" name="password" v-validate="'required|digits:6'" type="password" @focus="input2Focus" @blur="input2Blur($event)">
          </div>
          <button type="submit">ok</button>
        </form>
      </div>
    </main>
  </div>
</template>

<script>

export default {
  data () {
    return {
      string1Length: 0,
      string2Length: 0,
      eyePositionX: 0,
      eyePositionY: 0,
      eyeClose: false,
      label1State: false,
      label2State: false,
      virtualKeyboard: false,
      isiOS: !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
      isAndroid: navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1,
      isInput1: false,
      isInput2: false,
      input1Activated: false,
      positionReset: false,
      buttonOriginStatus: false,
      countDowningButton: false,
      phoneNumber: '',
      verigicationCode: '',
      getVerificationCodeInfo: '获取验证码',
      windowH: document.documentElement.clientHeight,
      windowW: document.documentElement.clientWidth,
      formVerifyError: false,
      logInfo: '验证码 666666'
    }
  },
  methods: {
    watchString (event) {
      this.string1Length = event.currentTarget.value.length / 100 - 0.015
      if (this.string1Length < .12) {
        this.eyePositionX = this.string1Length
      }
      if (this.string1Length > .01) {
        this.buttonOriginStatus = true
      }
      if (this.string1Length = .11) {
        this.phoneNumber = event.currentTarget.value
      }
      this.eyePositionY = .18
    },
    watchMouse (event) {
      let dw = document.documentElement.clientWidth / .10;
      let dh = document.documentElement.clientHeight / .22

      this.eyePositionX = event.pageX / dw;
      this.eyePositionY = event.pageY / dh;
    },
    input1Focus () {
      this.label1State = true
      this.isInput1 = true
      if ((this.isiOS || this.isAndroid) && this.windowW < 400) {
        this.virtualKeyboard = true
      }
    },
    input1Blur () {
      this.virtualKeyboard = false
      this.isInput1 = false
      if (this.string1Length === 0) {
        this.label1State = false
      }

    },
    input2Focus () {
      this.eyeClose = true
      this.eyePositionX = 0
      this.eyePositionY = 0
      this.label2State = true
      this.isInput2 = true
      this.input1Activated = true
      if ((this.isiOS || this.isAndroid) && this.windowW < 400) {
        this.virtualKeyboard = true
      }
    },
    input2Blur (event) {
      this.labelState = 0
      this.eyeClose = false
      this.virtualKeyboard = false
      this.isInput2 = false
      this.positionReset = true
      this.verigicationCode = event.currentTarget.value
      this.string2Length = event.currentTarget.value.length
      if (this.string2Length === 0) {
        this.label2State = false
      }
    },
    watchWindowResize () {
      let windowHafter = document.documentElement.clientHeight
      let windowHchange = this.windowH - windowHafter
      if (windowHchange > 100) {
        this.virtualKeyboard = true
      } else {
        this.virtualKeyboard = false
      }
    },
    watchWindowScroll () {
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    },
    submitForm () {
      if (this.string1Length === 0 || this.string2Length === 0) {
        this.formVerifyError = true
      }
      setTimeout(() => {
        this.formVerifyError = false
      }, 1000)
    },
    // verify form components
    validateBeforeSubmit () {
      this.$validator.validateAll().then((result) => {
        if (result) {

          this.virtualGetSale();

          this.$ajax({
            method: 'get',
            url: 'http://music.163.com/api/playlist/detail?id=19723756',
          })
            .then(function (res) {
              console.log(res.data.result.tracks[0].name)
              if (this.logInfo) {
                alert('领取成功')
              } else {
                alert('没有之歌')
              }
            }.bind(this))

            .catch(function (err) {
              console.log(err)
            })
          return;
        }
        this.formVerifyError = true;
        setTimeout(() => {
          this.formVerifyError = false
        }, 1000)
      });
    },
    getVerificationCode () {

      console.log(this.phoneNumber);
      this.virtualGetData()

      this.$ajax({
        method: 'get',
        url: 'http://music.163.com/api/playlist/detail?id=19723756',
      }).then(function (res) {
        console.log(res);
        this.countDowningButton = true
        let countDown = 60
        let countDownTimer = setInterval(() => {
          countDown--
          this.getVerificationCodeInfo = '重新获取(' + countDown + 's)'
        }, 1000)
        setTimeout(() => {
          clearInterval(countDownTimer)
          this.getVerificationCodeInfo = '获取验证码'
          this.countDowningButton = false
        }, 60000);
      }.bind(this)).catch(function (err) {
        console.log(err);
        this.getVerificationCodeInfo = '获取失败'
      })
    },
    virtualGetData () {
      this.countDowningButton = true
      let countDown = 60
      let countDownTimer = setInterval(() => {
        countDown--
        this.getVerificationCodeInfo = '重新获取(' + countDown + 's)'
      }, 1000)
      setTimeout(() => {
        clearInterval(countDownTimer)
        this.getVerificationCodeInfo = '获取验证码'
        this.countDowningButton = false
      }, 60000);
    },
    virtualGetSale () {
      if (this.verigicationCode === '666666') {
        alert('领取成功')
      } else {
        this.formVerifyError = true;
        setTimeout(() => {
          this.formVerifyError = false
        }, 1000)
      }
    }
  },
  mounted () {
    window.onresize = this.watchWindowResize

    window.addEventListener('scroll', this.watchWindowScroll)
  }

}
</script>
<style lang='stylus' scoped>
@import '../assets/styles/index.styl';

.sale_form {
  & .bg_texture {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    background-image: url('https://browniu.coding.me/demo/wantShop2/images/theme-pattern_5.jpg');
    opacity: 0.3;
  }

  & main {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    & .main-inner {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;

      &.virtual_keyboard {
        transform: translate(-50%, -30%);

        & .model {
          font-size: 60px;
          transform: translate(-50%, 0%);
        }

        &.is_iOS {
          &.is_input1 {
            transform: translate(-50%, -30%);

            &.input1_activated {
              transform: translate(-50%, 0%);
            }
          }

          &.is_input2 {
            transform: translate(-50%, 0%);

            & .model {
              font-size: 40px;
            }
          }
        }

        &.is_Android {
          &.is_input1 {
          }

          &.is_input2 {
            & .model {
              font-size: 50px;
            }
          }
        }
      }

      @media (max-height: 600px) {
        transform: translate(-50%, -45%);
      }

      & .model {
        font-size: 100px;
        transition: 0.3s ease;
        position: relative;
        left: 8px;
        height: 2em;
        width: 2em;
        left: 50%;
        transform: translateX(-50%);

        &.form_verify_error {
          animation: shake 1s ease;
        }

        &.position_reset {
          transform: translate(-50%, 0%);
        }

        @media (max-width: 767px) {
          font-size: 80px;
        }

        & .ear {
          position: absolute;
          width: 0.8em;
          height: 0.8em;
          background: #000;
          border: 0.1em solid #fff;
          border-radius: 50%;
          left: -0.1em;
          top: -0.15em;

          &:after {
            content: '';
            position: absolute;
            width: 0.8em;
            height: 0.8em;
            background: #000;
            border: 0.1em solid #fff;
            border-radius: 50%;
            left: 1.1em;
            top: -0.15em;
          }
        }

        & .face {
          height: 2em;
          width: 2em;
          // box-shadow: 0 0.1em 0.15em rgba(0, 0, 0, 0.15);
          position: relative;
          margin: 0;
          padding: 0;
          background-image: url('../assets/images/main_model.svg');
          background-size: contain;
          background-repeat: no-repeat;

          & .eye-shade {
            background: #231815;
            width: 0.3em;
            height: 0.4em;
            position: absolute;
            top: 0.5em;
            left: 0.55em;
            border-radius: 50%;
            border: 0.05em solid #231815;

            &.right {
              left: 1.05em;
            }
          }

          & .eye-white {
            position: absolute;
            width: 0.3em;
            height: 0.4em;
            border-radius: 50%;
            background: #fff;
            z-index: 10;
            top: 0.5em;
            left: 0.55em;
            transition: transform 0.1s ease;
            border: 0.05em solid #231815;

            // animation: eyeClose 3s ease infinite;
            & .eye-ball {
              position: absolute;
              left: 0;
              top: 0.05em;
              height: 0.2em;
              width: 0.2em;
              border-radius: 50%;
              transition: transform 0.1s;
              background: #231815;
              transform: translate(0, 0);
            }

            &.right {
              left: auto;
              right: 0.55em;
            }

            &.eye_close {
              transform: scaleY(0.03);
            }
          }
        }
      }

      & form {
        margin-top: 40px;
        text-align: center;

        & .inputGrop {
          position: relative;

          & label {
            position: absolute;
            top: 15px;
            left: 10px;
            color: #aaa;
            font-weight: lighter;
            font-size: 16px;
            transition: 0.15s ease;

            &.active {
              top: -20px;
              left: 3px;
              font-size: 12px;
              color: #333;
              font-weight: normal;
            }
          }

          & input {
            box-sizing: border-box;
            border-radius: 3px;
            height: 50px;
            width: 250px;
            outline: none;
            border: 0;
            font-size: 24px;
            padding: 0 10px;
            margin-bottom: 25px;
            background: #fff;

            &.is_error {
              border: 1px solid red;

              & ~ button {
                display: none;
              }
            }
          }

          & button {
            height: 30px;
            width: 95px;
            background: #f1f1f1;
            color: #000;
            font-size: 12px;
            position: absolute;
            top: 10px;
            right: 0;
            transform: scale(0.8);

            &:disabled {
              color: #999;
            }

            &.origin_status {
              display: none;
            }
          }
        }

        & button {
          cursor: pointer;
          height: 50px;
          width: 250px;
          outline: none;
          border: 0;
          border-radius: 3px;
          font-size: 18px;
          background: #000;
          color: #fff;
          font-weight: lighter;
        }
      }
    }
  }
}

.watchStatus {
  position: absolute;
  top: 0;
  left: 10px;
}

@keyframes shake {
  from, to {
    transform: translate3d(-50%, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-53%, 0, 0);
  }

  20%, 40%, 60%, 80% {
    transform: translate3d(-47%, 0, 0);
  }
}

@keyframes eyeClose {
  from, to {
    transform: scaleY(1);
  }

  10% {
    transform: scaleY(0.1);
  }

  10.01% {
    transform: scaleY(1);
  }
}
</style>